<template>
  <view class="social">
    <view class="connections">
      <text class="title">人脉推荐</text>
      <view class="add-friend">
        <up-button
          type="primary"
          text="添加好友"
          shape="circle"
          icon="plus"
          color="#4d80f0"
          @click="navigator(`/socialPages/social/friend`)"
        ></up-button
      ></view>
    </view>
    <view class="forum">
      <view class="forum-text">
        <text class="title">论坛</text>
        <text class="all">全部</text>
      </view>
      <view class="forum-details">
        <view v-for="(item, index) in forumList" :key="index" class="item" @click="navigator(`/socialPages/social/postDetails`)">
          <view class="item-user">
            <up-image
              :show-loading="true"
              shape="circle"
              :src="item.pathUrl"
              width="40px"
              height="40px"
            ></up-image>
            <view class="user-name">
              <text class="title">{{ item.userName }}</text>
              <view class="time">
                <up-icon name="clock" size="20"></up-icon>
                <text>{{ item.time }}</text>
              </view>
            </view>
          </view>
          <view class="title item-title">{{ item.title }}</view>
          <view class="item-comment">
            <view>亲爱的疆友们：</view>
            <view class="comment">{{ item.comment }}</view>
          </view>
          <img class="img-pilot" :src="item.pilotUrl" />
          <view class="item-icon">
            <view class="icon">
              <up-icon name="thumb-up" size="30" @click="iconChange(item, 1)"></up-icon>
              <text>{{ item.like }}</text>
            </view>
            <view class="icon" @click.stop="navigator(`/socialPages/social/postThread`)">
              <up-icon name="chat" size="30" @click="iconChange(item, 2)"></up-icon>
              <text>{{ item.commentCount }}</text>
            </view>
            <view class="icon">
              <up-icon name="share" size="30" @click="iconChange(item, 3)"></up-icon>
              <text>{{ item.share }}</text>
            </view>
            <view class="icon">
              <up-icon name="star" size="30" @click="iconChange(item, 4)"></up-icon>
              <text>{{ item.collect }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <tabbar v-model:tabbarIndex="tabbarIndex"></tabbar>
</template>
<script setup lang="ts">
import tabbar from "@/components/tabbar.vue";
const tabbarIndex = ref<any>(2);
const forumList = ref<any>([
  {
    id: 1,
    pathUrl:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    userName: "zyz",
    time: "2025-08-14 16:54:15",
    title: "[无人机租赁] 正式与您相遇",
    comment: `当清晨的第一缕阳光洒在天山脚下，当无人机的轰鸣响彻云霄`,
    pilotUrl:
      "https://img0.baidu.com/it/u=3997995284,3408795002&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1167",
    like: 10,
    commentCount: 20,
    share: 10,
    collect: 30,
  },
  {
    id: 2,
    pathUrl:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    userName: "zyz",
    time: "2025-08-14 16:54:15",
    title: "[无人机租赁] 正式与您相遇",
    comment: `当清晨的第一缕阳光洒在天山脚下，当无人机的轰鸣响彻云霄`,
    pilotUrl:
      "https://img0.baidu.com/it/u=3997995284,3408795002&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1167",
    like: 10,
    commentCount: 20,
    share: 10,
    collect: 30,
  },
]);



const navigator = (url: any) => {
  uni.navigateTo({
    url,
  });
};
const iconChange = (item: any, index: any) => {};
</script>
<style lang="scss" scoped>
.social {
  background-color: #f9fafb;
  height: 100vh;
  padding-bottom: 100px;
  overflow: auto;
  .connections {
    padding: 20px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .add-friend {
      width: 120px;
    }
  }
  .title {
    font-size: 18px;
    font-weight: bold;
    color: #000;
  }
  .forum {
    padding: 20px;
    .forum-text {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .all {
      font-size: 16px;
      font-weight: normal;
    }

    .forum-details {
      margin-top: 20px;
      .item {
        border-radius: 6px;
        background-color: white;
        padding: 10px;
        &:not(:first-child) {
          margin-top: 20px;
        }
        .item-user {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          .user-name {
            display: flex;
            flex-direction: column;
            padding-left: 10px;
            line-height: 1.8;
            .time {
              display: flex;
              text {
                padding-left: 10px;
              }
            }
          }
        }
        .item-title {
          padding: 10px 0;
        }
        .comment {
          max-width: 100%;
          white-space: nowrap; /* 防止文本换行 */
          overflow: hidden; /* 隐藏溢出的内容 */
          text-overflow: ellipsis; /* 显示省略号来表示溢出的内容 */
        }
        .img-pilot {
          width: 100%;
          max-height: 220px;
          border-radius: 6px;
          margin: 10px 0;
        }
        .item-icon {
          display: flex;
          align-items: center;
          justify-content: space-between;
          // margin-top: 10px;
          padding: 10px 0;
          border-top: 1px solid #f2f2f2;
          .icon {
            display: flex;
            align-items: center;
            text {
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
</style>
